<template>
	<div id="#app">
		<el-card>
			<div slot="header" class="head">
				<span>{{$t("home.commentsManagement")}}</span>
			</div>
			<div class="control">
				<ul>
					<li class="d_h_row_spbt">
						<div class="d_h_row">
							<div class="label d_h_col">{{$t("home.chooseWork")}}</div>
							<el-select @change="changeChapter(selectInfo.bookid)" v-model="selectInfo.bookid" :placeholder="$t('home.pleaseSelect')">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="d_h_row">
							<div class="label d_h_col">{{$t("home.commentTime")}}</div>
							<el-select v-model="selectInfo.timespat" :placeholder="$t('home.pleaseSelect')">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
					</li>
					<li class="d_h_row_spbt">
						<div class="d_h_row">
							<div class="label d_h_col">{{$t("home.commentType")}}</div>
							<el-select v-model="selectInfo.type" :placeholder="$t('home.pleaseSelect')">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="d_h_row">
							<div class="label d_h_col">{{$t("home.selectChapters")}}</div>
							<el-select :disabled="selectInfo.bookid == null" v-model="selectInfo.chapte" :placeholder="$t('home.pleaseSelect')">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
					</li>
					<li class="d_h_row_spbt">
						<div class="d_h_row">
							<div class="label d_h_col">{{$t("home.readerNickname")}}</div>
							<el-input v-model="selectInfo.name" :placeholder="$t('home.pleaseEnterReaderNickname')"></el-input>
						</div>
						<div class="d_h_row">
							<el-button type="primary" @click='search()'>{{$t("home.searchInformation")}}</el-button>
						</div>
					</li>
				</ul>
			</div>
			<div>
				<div class="block">
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane v-for="(item,index) in tabList" :key="item.name+item.num" :label="item.name+item.num" :name="item.line">
						</el-tab-pane>
						<div class="content">
							<div v-for="(comit,index) in commentList" class="item d_h_col">
								<div class="item_info ">
									<div class="avatar">
										<img :src="comit.avatar" alt="">
									</div>
									<div class="msg">
										<div class="user d_h_row_spbt">
											<div class="userName">{{comit.name}}
												<span class="userType">{{$t("home.VIP")}}</span>
												<!-- <span class="userType"></span> -->
												<!-- <span class="userType"></span> -->
											</div>

											<div class="time">{{comit.time}}</div>
										</div>
										<div class="context">{{comit.context}}</div>
										<div class="comment">{{comit.comment}}</div>
									</div>
								</div>
								<div class="item_control ">
									<div class="control_box" >
										<el-button ype="primary" size="mini">{{$t("home.reply")}}</el-button>
										<div class="d_h_col">
											<span><i class="el-icon-chat-line-square"></i>{{comit.mesNum}}</span>
										</div>
										<div class="d_h_col">
											<span><i class="el-icon-info"></i>{{comit.praiseNum}}</span>

										</div>
									</div>
								</div>
							</div>
						</div>
						<div>
							<el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="3" layout="prev, pager, next, jumper"
							 :total="12">
							</el-pagination>
						</div>
					</el-tabs>
				</div>

			</div>

		</el-card>
	</div>
</template>


<script>
	export default {
		data: function() {
			return {
				activeName: 'first',
				selectInfo: {
					bookid: null,
					timespat: '1--2',
					type: 'xxx',
					chapte: '122章',
					name: ''
				},
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				commentList: [{
						name: '李磊',
						avatar: 'https://img03.sogoucdn.com/v2/thumb/crop/xy/ai/x/0/y/0/w/120/h/90/iw/90/ih/67.5/t/0/ir/3?t=2&appid=200997&url=http%3A%2F%2Fp4.itc.cn%2Fq_70%2Fimages03%2F20210113%2F10ac13a9ab4745dea76d3a6131dc567c.jpeg&sign=a4efcba621c38a36d7dd4ba8ee55b4a5',
						context: '打赏了《作品名称》“如果是段评，这里就显示选段内容，显示一行，超出部分显示…”',
						comment: '这里是评论的内容，需要全部显示出来',
						time: '2020-20-09',
						mesNum: 22,
						praiseNum: 33
					},
					{
						name: '李xxx磊',
						avatar: 'https://img03.sogoucdn.com/v2/thumb/crop/xy/ai/x/0/y/0/w/120/h/90/iw/90/ih/67.5/t/0/ir/3?t=2&appid=200997&url=http%3A%2F%2Fp4.itc.cn%2Fq_70%2Fimages03%2F20210113%2F10ac13a9ab4745dea76d3a6131dc567c.jpeg&sign=a4efcba621c38a36d7dd4ba8ee55b4a5',
						context: '打赏了《作品名称》“如果是段评，这里就显示选段内容，显示一行，超出部分显示…”',
						comment: '这里是评论的内容，需要全部显示出来',
						time: '2020-20-03',
						mesNum: 22,
						praiseNum: 33
					}

				],
				tabList: [{
						name: '全部评论',
						num: 20,
						line: 'first'
					},
					{
						name: '简评',
						num: 122,
						line: 'second'
					},
					{
						name: '精评',
						num: 32,
						line: 'third'
					}
				],
				currentPage: 11
			};
		},
		methods: {
			handleSizeChange(val) {
				
			},
			handleCurrentChange(val) {
			},
			handleClick(tab) {
				this.activeName = tab.line
				// this.getInfo(tab.lable)
			},
			search(){
			},
			changeChapter(param){
			},
			getInfo() {

			}

		},
	}
</script>


<style lang="scss" scoped="scoped">
	.head {
		font-size: 24px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		// line-height: 20px;
		display: flex;
		flex-direction: el-row;
		justify-content: space-between;
		padding-bottom: 10px;
		border-bottom: 1px solid #ccc;

		a {
			font-size: 10px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			// color: #999999;
		}
	}

	.control {
		ul {
			li {
				margin: 10px 0;

				.label {
					margin-right: 20px;
					min-width: 80px;
				}
			}
		}
	}

	.block {
		.content {
			width: 100%;
			min-height: 499px;

			.item {
				padding: 5px;
				border-bottom:1px solid #CCCCCC ;
				.item_info {
					display: flex;
					flex-direction: row;
					
					// justify-content: space-around;
					.avatar {
						width: 65px;
						height: 65px;
						border-radius: 50px;
						overflow: hidden;
						margin-top: 20px;
						margin-left: 25px;
						margin-right: 10px;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.msg {
						display: flex;
						flex: 1;
						flex-direction: column;
						justify-content: space-around;

						.user {

							.userName {
								font-size: 16px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 22px;

								.userType {}
							}

							.time {
								font-size: 14px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #CCCCCC;
								line-height: 20px;

							}
						}

						.context {
							font-size: 16px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999990;
							line-height: 22px;
						}

						.comment {
							font-size: 16px;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 22px;

						}
					}
				}
				.item_control {
					display: flex;
					flex-direction: row-reverse;
					.control_box{
						width: 200px; 
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
	}
</style>
